<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>封装</title>
		<style>
			#box {
				width: 200px;
				height: 200px;
				background-color: red;
			}

		</style>
		<!-- 

			<script src="jq.js"></script>
		 -->
		
		<script>
			// window.onload = function() {
			// 	console.log(111);
			// 	var boxDiv = document.getElementById("box");
			// 	console.log(boxDiv);
			// };
			// DOM加载完成时间
			// document.addEventListener('DOMContentLoaded', function() {
			// 	console.log(222);
			// 	var boxDiv = document.getElementById("box");
			// 	console.log(boxDiv);
			// }, false);
			// $(function() {
			// 	var boxDiv = document.getElementById("box");
			// 	console.log(boxDiv);
			// });
		</script>
	</head>
	<body>
		<!-- 
			这是一个快速查找元素的轻量级框架
		 -->
		<div id="box"></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
<script src="jq.js"></script>
<script>
	
	// var boxDiv = document.getElementById("box");
	// console.log($(boxDiv));

	// $(function() {

	// 	console.log($("#box"));

	// });

	// console.log($("#box"));
	// console.log($("ul>li"));

	// for (var i = 0; i < $("ul>li").length; i++) {
	// 	$("ul>li")[i].style.height = "200px";
	// 	$("ul>li")[i].style.width = 100 + i * 50 + "px";
	// 	$("ul>li")[i].style.background = "red";
	// }

	// [div#box]
	// console.log($("#box").css("border-color"));

	// var obj = {
	// 	name: "小明",
	// 	age: 20
	// };
	// console.log(obj.name);
	// console.log(obj["name"]);
	// var key = "age";
	// console.log(obj[key]);

	// console.log($("li").css("background"));
	// $('li').css({
	// 	width: "200px",
	// 	height: "200px",
	// 	border: "2px solid black"
	// }).css({
	// 	background: "red"
	// }).css({
	// 	position: "absolute",
	// 	top: "100px",
	// 	right: "50px"
	// }).css("background", "blue");

	$('li').css({
		width: "200px",
		height: "200px",
		border: "2px solid black",
		background: "blue"
	}).eq(0).css("background", "red").on('click', function() {
		// console.log(this);
		$(this).css({
			height: "300px",
			width: "300px",
			background: "yellow"
		});
	});






</script>